<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>申报商户</title>
    <link rel="stylesheet" href="../../../bangnuo/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../bangnuo/bootstrap/css">
    <link rel="stylesheet" href="../../../bangnuo/css/operation/add_merchants_new.css">
    <script src="../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../bangnuo/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../../bangnuo/vue/vue.js"></script>
    <script src="js/service/merchantsService.js"></script>
    <script src="../../../bangnuo/vue/axios.min.js"></script>
    <script type="module" src="./js/config/public.js"></script>
    <style>
        .feilv-class{
            width: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--布局容器-->
    <div class="container-fluid">
        <!--进度条展示-->
        <div class="row" id="jindu">
            <ul style="display:flex; align-items: center">
                <li class="aline">

                </li>
                <li class="step">
                    <p>基本信息</p>
                </li>
                <li class="aline">
                    <span></span>
                </li>
                <li class="step step-6">
                    <p>结算信息</p>
                </li>
                <li class="alineg">
                    <span></span>
                </li>
                <li class="step step-2">
                    <p>店铺信息</p>
                </li>
                <li class="alineg">
                    <span></span>
                </li>
                <li class="step step-3">
                    <p>资质信息</p>
                </li>
                <li  class="alineg">
                    <span></span>
                </li>
                <li class="step step-4">
                    <p>上传资质</p>
                </li>
                <li class="alineg">
                    <span></span>
                </li>
                <li class="step step-5">
                    <p>保单完成</p>
                </li>
                <li class="alineg">
                    <span></span>
                </li>
            </ul>
        </div>
        <!--内容头展示-->
        <div class="row jiben-title-text">
            结算信息
        </div>
        <!--内容-->
        <div class="row input-content">
            <div  class="container input-container-content">
                <div v-if="form.commercialTenantDetails.incomType==1 || form.commercialTenantDetails.incomType==3 " class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算标识：</span>
                        <select v-model="form.commercialTenantDetails.stlSign"  class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="1">对私</option>
                        </select>
                    </div>
                </div>

                <div v-else class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算标识：</span>
                        <select v-model="form.commercialTenantDetails.stlSign"  class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="1">对私</option>
                            <option value ="0" >对公</option>
                        </select>
                    </div>
                </div>

                <div v-if="form.commercialTenantDetails.incomType==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算方：</span>
                        <select v-model="form.commercialTenantDetails.settlementParty"  class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="1">同法人</option>
                        </select>
                    </div>
                </div>

                <div v-if="form.commercialTenantDetails.incomType!=1 && form.commercialTenantDetails.stlSign == 1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算方：</span>
                        <select v-model="form.commercialTenantDetails.settlementParty"  class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="1">同法人</option>
                            <option value ="2">非法人</option>
                        </select>
                    </div>
                </div>

                <div v-if="form.commercialTenantDetails.incomType!=1 && form.commercialTenantDetails.stlSign == 0" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算方：</span>
                        <select v-model="form.commercialTenantDetails.settlementParty"  class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="0">公司户</option>

                        </select>
                    </div>
                </div>


                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算账户：</span>
                        <input v-model="form.commercialTenantDetails.stlOac" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">户名：</span>
                        <input v-model="form.commercialTenantDetails.bnkAcnm" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">开户行：</span>
                        <input v-model="form.commercialTenantDetails.wcLbnkNo" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==1 && form.commercialTenantDetails.stlSign==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算人身份证号码：</span>
                        <input v-model="form.commercialTenantDetails.icrpIdNo" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==1 && form.commercialTenantDetails.stlSign==1" class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算人身份证开始日期：</span>
                        <input v-model="form.commercialTenantDetails.crpStartDt" type="date" class="form-control"  aria-describedby="basic-addon1">
                    </div>
                </div>
                <div v-if="form.commercialTenantDetails.incomType==1 && form.commercialTenantDetails.stlSign==1" class="row input-container-row">
                    <div class="input-group">
                        <span  class="input-group-addon">结算人身份证截止日期：</span>
                        <input v-model="form.commercialTenantDetails.crpEndDt" type="date" class="form-control" placeholder="" aria-describedby="basic-addon1">
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">结算类型：</span>
                        <select v-model="form.commercialTenantDetails.stlTyp" class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="1">T+1</option>
                            <option value ="2" >D+1</option>
                        </select>
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">卡种：</span>
                        <select v-model="form.commercialTenantDetails.cardTyp" class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="00">全部</option>
                            <option value ="01" >借记卡</option>
                        </select>
                    </div>
                </div>

                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">交易类型：</span>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox1" value="C1"> 消费
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox2" value="C2"> 消费撤销
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox3" value="C3"> 预授权
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox4" value="C4"> 预授权完成
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox5" value="C5"> 预授权完成撤销
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox6" value="C6"> 预授权撤销
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" v-model="tranTypesList" id="inlineCheckbox7" value="C7"> 余额查询
                        </label>
                    </div>

                </div>

                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">免密免签：</span>
                        <select v-model="form.commercialTenantDetails.suptDbfreeFlg" class="select-option" style="height: 34px;width: 100%">
                            <option value ="">---    请选择   ---</option>
                            <option value ="0">不支持</option>
                            <option value ="1" >支持</option>
                        </select>
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">微信费率(%)：</span>
                        <input v-model="form.commercialTenantDetails.feeRatScan" type="text" class="feilv-class"  placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">支付宝费率(%)：</span>
                        <input v-model="form.commercialTenantDetails.feeRat3Scan" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">银联二维码优惠费率：</span>
                        <input v-model="form.commercialTenantDetails.feeRat1Scan" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">银联二维码标准费率：</span>
                        <input v-model="form.commercialTenantDetails.feeRat2Scan" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">借记卡费率(%)：</span>
                        <input v-model="form.commercialTenantDetails.feeRat" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">借记卡封顶（元）：</span>
                        <input v-model="form.commercialTenantDetails.maxFeeAmt" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">云闪付贷记卡费率(%)：</span>
                        <input v-model="form.commercialTenantDetails.ysfcreditfee" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">云闪付借记卡费率（元）：</span>
                        <input v-model="form.commercialTenantDetails.ysfdebitfee" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
                <div class="row input-container-row">
                    <div class="input-group">
                        <span class="input-group-addon">贷记卡费率（%）：</span>
                        <input v-model="form.commercialTenantDetails.feeRat1" type="text" class="feilv-class" placeholder="" aria-describedby="basic-addon1">%
                    </div>
                </div>
            </div>
            <div class=" submit-button">
                <button type="button" class="btn btn-primary button-class" @click="breakButton">上一步</button>
                <button type="button" @click="savaSubmit" class="btn btn-primary button-class">保存并继续</button>
            </div>
        </div>
    </div>
</div>
    
<script type = "module">
    import bnApi from './js/config/public.js';
    var vue = new Vue({
        el: '#app',
        data:{
            id:'',
            code:1,
            prevList:[],
            cityList:[],
            areaList:[],
            mccSupList:[],
            mccTypeList:[],
            mccList:[],
            Flag:false,
            tranTypesList:[],
            form:{
                commercialTenant: {
                    area: "0",
                    city: "0",
                    companyName: "",
                    createTime: "",
                    email: "",
                    id: "",
                    imageList: "",
                    isDelete: 1,
                    name: "",
                    number: "",
                    phone: "",
                    pid: "",
                    position: "",
                    province: "0",
                    remark: "",
                    status: 0,
                    step: 1,
                    type: 0,
                    userId: "",
                    username: ""
                },
                commercialTenantDetails: {
                    stlTyp:"",
                    stlSign:"",
                    merchantsType1:"0",
                    merchantsType2:"0",
                    incomType:"0",
                    alipayFlg: "",
                    bnkAcnm: "",
                    bseLiceNm: "",
                    busExpDt: "",
                    busLicNo: "",
                    commercialTenantId: "",
                    content: "",
                    createTime: "",
                    crpExpDt: "",
                    crpIdNo: "",
                    crpNm: "",
                    id: "",
                    logNo: "",
                    mailbox: "",
                    mccCd: "0",
                    mercAdds: "",
                    mercId: "",
                    status: 0,
                    stlOac: "",
                    stoeAdds: "",
                    stoeAreaCod: "",
                    stoeCntCardid:"",
                    stoeCntNm: "",
                    stoeCntTel: "",
                    stoeId: "",
                    stoeNm: "",
                    trmRec: "",
                    trmScan: "",
                    trmTp: "",
                    updateTime: "",
                    wcLbnkNo: "",
                    yhkpayFlg: "",
                    icrpIdNo:"",
                    crpEndDt:"",
                    crpStartDt:"",
                    feeRatScan:"",
                    feeRat3Scan:"",
                    feeRat1Scan:"",
                    feeRat2Scan:"",
                    feeRat:"",
                    maxFeeAmt:"",
                    ysfcreditfee:"",
                    ysfdebitfee:"",
                    feeRat1:"",
                    settlementParty:"",
                    tranTyps:"",
                    cardTyp:"",
                    suptDbfreeFlg:""
                },
                password: "",
                photo: "",
                username: ""
            },
        },
        methods:{
            savaSubmit:function () {
                this.form.commercialTenant.step = 1;
                let tranTypesStr = "";
                for(let i=0;i<this.tranTypesList.length;i++){
                    tranTypesStr = tranTypesStr+this.tranTypesList[i]+",";
                    if(i==this.tranTypesList.length-1){
                        tranTypesStr = tranTypesStr+this.tranTypesList[i];
                    }
                }
                this.form.commercialTenantDetails.tranTyps = tranTypesStr;
                bnApi.requestPost('/commercial/addNew',this.form).then(res=>{
                    if(res.success){
                        this.id = res.object.id;
                        //进行跳转进入下一步
                        location.href='add_merchants_new2.html?id='+this.id;
                        console.log("this",this);
                    }
                });
            },
            breakButton:function () {
                console.log("执行后退方法")
                location.href = "./add_merchants_new.html?id="+this.id;
            },
            findById:function () {
                this.id = this.getQueryVariable("id");
                console.log("传过来中的id:",this.id);
                if(this.id == ''){
                    return;
                }

                bnApi.requestGet('/commercial/findByIdNew/'+this.id).then(res=>{
                    if(res.success){
                        //此代码不写，插入可能失败
                        this.form = res.object;
                        //交易类型转换
                        this.tranTypesList = res.object.commercialTenantDetails.tranTyps.split(",");
                        console.log("tranTypesList:",this.tranTypesList );
                       res.object.commercialTenantDetails.crpStartDt = res.object.commercialTenantDetails.crpStartDt.substr(0,10);
                        res.object.commercialTenantDetails.crpEndDt= res.object.commercialTenantDetails.crpEndDt.substr(0,10);
                         console.log("时间",res.object.commercialTenantDetails.crpStartDt);
                        console.log("时间",res.object.commercialTenantDetails.crpEndDt);
                        this.form = res.object

                    }
                });
            },
            getQueryVariable:function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            },
            dateFormat(date) {
                var dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000)
                    .toISOString()
                    .replace(/T/g, " ")
                    .replace(/\.[\d]{3}Z/, "");
            }
        },
        mounted(){
            this.id = this.getQueryVariable("id");
            console.log("this.id",this.id)
            this.findById();
        }
    });
</script>
</body>
</html>